<!-- 盘点 -->
<template>
  <div class="pandian">
    <!-- 循环 -->
    <div>
      <van-field readonly clickable name="picker" :value="areaname" label="池塘" placeholder="点击选择"
        @click="showPicker1 = true" />

      <van-cell title="日期筛选" title-style="flex: inherit;" :value="date" @click="dateshow">

      </van-cell>
      <van-cell style="text-align:center">
        <div style="width:50%;float:left;    text-align: center;">
          <van-button type="primary" @click="searchData" style="background-color:rgb(77, 173, 249);border:0px">查询
          </van-button>
        </div>
        <div style="width:50%;float:left;    text-align: center;">
          <van-button type="primary" style="margin-left:20px;background-color:rgb(77, 173, 249);border:0px"
            @click="clearDate">清除</van-button>
        </div>


      </van-cell>
      <van-calendar v-model="show" type="range" @confirm="onConfirm" />

      <van-cell-group>
        <van-cell style="font-weight: bold;" title="出库"  value-class="font1" :value="'数量   ' + data.chuku" />
        <van-cell style="font-weight: bold;" title="售卖"  value-class="font1" :value="'金额   ' + data.maixia_money + '重量   ' + data.maixia_weight" />
        <van-cell>
          <div style="clear:both;padding:20px">
            <b>库存</b>
          </div>
          <table style="width: 100%;">
            <tr>
              <td>物料</td>

              <td>重量</td>

            </tr>
            <tr v-for="(item, index) in goods" v-bind:key="index">
              <td>{{ item.typename }}</td>

              <td>{{ item.weight }}</td>


            </tr>
          </table>

        </van-cell>

        <van-cell style="font-weight: bold;" value-class="font1" title="入库" :value="'数量：   ' + data.ruku" />

      </van-cell-group>


   




    </div>

    <van-popup v-model="showPicker1" position="bottom">
      <van-picker show-toolbar :columns="arealist" @confirm="onConfirm1" @cancel="showPicker1 = false" />
    </van-popup>

  </div>
</template>

<script>

import { warehouseTJ, warehouseData } from "../../../api/warehouse";
import { areaList } from "../../../api/area";

export default {
  name: "",
  data() {
    return {
      ruku_day_arr: [],
      maixia_day_arr: [],
      chuku_day_arr: [],
      aid: "",
      areaname: "",
      date: "",
      show: false,
      data: {},
      stime: "",
      etime: "",
      arealist: [],
      showPicker1: false,
      goods: []

    };
  },
  methods: {
    async getData() {
      let res = await warehouseTJ({ userid: localStorage.getItem("userid"), stime: this.stime, etime: this.etime, aid: this.aid });
      console.log("res", res);
      if (res.status == 200) {
        this.data = res.data;


      }
    },
    async getGoods() {
      let res = await warehouseData({ userid: localStorage.getItem("userid") });
      console.log("res", res);
      if (res.status == 200) {
        this.goods = res.data;


      }
    },
    onConfirm1(value) {
      this.areaname = value.text;
      this.aid = value.value;
      this.showPicker1 = false;
    },
    dateshow() {

      this.show = true;

    },
    formatDate(date) {
      console.log("date", date);

      return this.$moment(date).format("YYYY-MM-DD");
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;


      console.log("ok", this.date);
      var stime = this.formatDate(start);
      var etime = this.formatDate(end);


      this.date = stime + " 至 " + etime;
      this.stime = stime;
      this.etime = etime;



    },
    clearDate() {
      this.stime = "";
      this.etime = "";
      this.date = "";
      this.aid = "";
      this.areaname = "";
    },
    searchData() {

      this.getData();
    },
    async getarea() {
      var res = await areaList({ userid: localStorage.getItem("userid") });
      if (res.status == 200) {
        var list = res.data;
        let arealist = [];
        for (var i = 0; i < list.length; i++) {
          arealist.push({ text: list[i].areaname, value: list[i].id });
        }

        this.arealist = arealist;
      }


    },

  },
  computed: {},
  watch: {},
  created() {

    this.stime = this.$moment(new Date()).format("YYYY-MM-DD");
    this.etime = this.$moment(new Date()).format("YYYY-MM-DD");
    this.date = this.$moment(new Date()).format("YYYY-MM-DD") + " 至 " + this.$moment(new Date()).format("YYYY-MM-DD");
    this.getarea();
    this.getData();
    this.getGoods();
  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.pandian {
  width: 100%;
  padding-bottom: 250px;

  .item {

    padding: 30px 30px;
    width: 100%;
    min-height: 260px;
    background-color: #fff;
    display: flex;
    margin-bottom: 20px;
    flex-direction: column;
    justify-content: space-around;
    font-size: 28px;

    :first-child {
      color: #3e96e8;
    }
  }
}

table tr td {

  text-align: center;

}

.font1{
  color:#323233;
}
</style>